<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户主页</title>
    <th:block th:insert="~{/fixed/header::head}"></th:block>
</head>
<script>
    $(function (){
        //保存按钮点击事件
        $("#updataUser").click(function (){
            //获取页面数据，并去除空格
            let loginName = $.trim($("#inputLoginName").val());
            let password = $.trim($("#inputPassword").val());
            let userName = $.trim($("#inputUserName").val());
            //判断是否有空数据
            if ("" != loginName && "" != password && "" != userName){
                //封装数据
                var formData = new FormData;
                formData.append("userLoginName",loginName)
                formData.append("userPassword",password)
                formData.append("userName",userName)
                //向后端发送数据
                $.ajax({
                    url:"/user/updataUser",
                    method: "POST",
                    data:formData,
                    processData: false,   // jQuery不要去处理发送的数据
                    contentType: false,   // jQuery不要去设置Content-Type请求头
                    success:function (data){
                        if (data){
                            alert("修改成功")
                            location.href = "/user"
                        }else {
                            alert("修改失败")
                        }
                    }
                })
            }else {
                alert("不能有空数据")
            }
        });

        //上传头像按钮点击事件
        $("#updataHead").click(function (){
            //判断是否有空数据
            if (null != $("#inputUserHead")[0].files[0]){
                //封装数据
                var formData = new FormData;
                formData.append("userImg",$("#inputUserHead")[0].files[0])
                //向后端发送数据
                $.ajax({
                    url:"/user/updataHead",
                    method: "POST",
                    data: formData,
                    processData: false,   // jQuery不要去处理发送的数据
                    contentType: false,   // jQuery不要去设置Content-Type请求头
                    success:function (data){
                        if (data){
                            alert("头像修改成功")
                            location.href = "/user"
                        }else {
                            alert("头像修改失败")
                        }
                    }
                })
            }else {
                alert("上传头像不能为空")
            }
        });

        //登出按钮点击事件
        $("#loginOut").click(function (){
            $.ajax({
                url:"/user/loginOut",
                method:"POST",
                data:null,
                success:function (data){
                    location.href = "/login"
                }
            })
        })
    })
</script>
<body>
<!--头部导航条-->
<header>
    <div class="header-area">
        <div class="header-mid header-sticky" style="box-shadow: 0 10px 15px rgb(25 25 25 / 10%);">
            <div class="container">
                <div class="menu-wrapper">
                    <!-- Logo -->
                    <div class="logo">
                        <a th:href="@{/index}"><img th:src="@{/assets/img/logo/logo.png}" alt=""></a>
                    </div>
                    <!-- Main-menu -->
                    <div class="main-menu d-none d-lg-block">
                        <nav>
                            <ul id="navigation">
                                <li><a th:href="@{/index}">主页</a></li>
                                <li><a th:href="@{/orders}">我的订单</a></li>
                            </ul>
                        </nav>
                    </div>
                    <!-- Header Right -->
                    <div class="header-right">
                        <ul>
                            <li><a th:href="@{/user}"><span class="flaticon-user"></span></a></li>
                            <li><a th:href="@{/cart}"><span class="flaticon-shopping-cart"></span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<div class="container">
    <div class="row" style="padding-top: 5%;">
        <!-- 左侧列表框开始 -->
        <div class="card col-lg-3 col-md-4 mt-sm-30" style="width: 18rem;">
            <img class="card-img-top" style="width: 16rem;" th:src="${'http://localhost:8888' + userData.getUserImg()}" alt="用户头像">
            <div class="card-body">
                <h5 class="card-title" style="text-align: center" th:text="${userData.getUserName()}"></h5>
            </div>
            <ul class="list-group list-group-flush" style="text-align: center">
                <li class="list-group-item"><a style="color: black" th:href="@{/user}">个人信息</a></li>
                <li class="list-group-item"><a style="color: black" th:href="@{/cart}">购物车</a></li>
                <li class="list-group-item"><a style="color: black" th:href="@{/orders}">订单信息</a></li>
                <li class="list-group-item"><a id="loginOut" style="color: black" href="javaScript:void(0)">退出账号</a></li>
            </ul>
        </div>
        <!-- 左侧列表框结束 -->

        <!-- 右侧内容框开始 -->
        <form class="col-lg-8 col-md-8 needs-validation" novalidate>
            <div class="form-group row">
                <label for="inputLoginName" class="col-sm-2 col-form-label">登录名</label>
                <div class="col-sm-10">
                    <input type="text" name="userName" class="form-control" id="inputLoginName"
                           th:value="${userData.getUserLoginName()}" maxlength="16" onkeyup="value=value.replace(/[\W]/g,'')">
                </div>
            </div>

            <div class="form-group row">
                <label for="inputPassword" class="col-sm-2 col-form-label">密码</label>
                <div class="col-sm-10">
                    <input type="text" name="userPassword" class="form-control" id="inputPassword"
                           th:value="${userData.getUserPassword()}" maxlength="18" onkeyup="value=value.replace(/[\W]/g,'')">
                </div>
            </div>

            <div class="form-group row">
                <label for="inputUserName" class="col-sm-2 col-form-label">用户名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputUserName" th:value="${userData.getUserName()}"
                           maxlength="10" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')">
                </div>
            </div>

            <div class="form-group row">
                <label for="inputUserHead" class="col-sm-2 col-form-label">修改头像</label>
                <div class="col-sm-10">
                    <input type="file" class="form-control" id="inputUserHead">
                </div>
            </div>

            <div class="form-group row">
                <div class="col-sm-10">
                    <button id="updataUser" type="button" class="genric-btn danger circle">保存</button>
                    <button id="updataHead" type="button" class="genric-btn danger-border circle">上传头像</button>
                </div>
            </div>
        </form>
        <!-- 右侧内容框结束 -->
    </div>
</div>

<th:block th:insert="~{/fixed/footer::foot}"></th:block>
</body>
</html>